<template>
    <div>
        <div v-if="user.certified == '未认证'">
            您的账号未认证,前往认证<el-button type="danger" @click="qwrz">前往认证</el-button>
        </div>
        <div v-else>

            <div class="count">
                <div class="countitem">
                    <div> 今日销售总额</div>
                    <div style="color: #f8c27e; font-weight: bold;">{{ countdata.curtotalprice }}</div>
                </div>
                <div class="countitem">
                    <div> 今日销售数量</div>
                    <div style="color: #f8c27e; font-weight: bold;">{{ countdata.curtotalCount }}</div>

                </div>
                <div class="countitem">
                    <div> 累计销售总额</div>
                    <div style="color: #fe2e2f; font-weight: bold;">{{ countdata.alltotalCount }}</div>

                </div>
                <div class="countitem">
                    <div> 累计销售数量</div>
                    <div style="color: #fe2e2f; font-weight: bold;">{{ countdata.alltotalprice }}</div>

                </div>

            </div>
            <div class="chartmain">
                <div id="chartmain1"></div>
                <div id="chartmain2"></div>
            </div>
        </div>
        <el-dialog title="认证信息" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
            <el-form :model="form" label-width="100px" style="padding-right: 50px" ref="formRef">
                <el-form-item label="资质证书" prop="qualificationFile" required>
                    <el-upload class="avatar-uploader" :file-list="fileList" action="/files/upload"
                        :headers="uploadHeaders" :show-file-list="false" :on-success="handleAvatarSuccess">
                        <img v-if="form.qualificationFile" :src="form.qualificationFile" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="身份证" prop="identityFile" required>
                    <el-upload class="avatar-uploader" :file-list="fileList" action="/files/upload"
                        :headers="uploadHeaders" :show-file-list="false" :on-success="handleAvatarSuccess1">
                        <img v-if="form.identityFile" :src="form.identityFile" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="身份证号" prop="identityNum" required>
                    <el-input v-model="form.identityNum" placeholder="请输入身份证号"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="fromVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import service from "../request"
import * as echarts from 'echarts';
export default {
    data() {
        return {
            fileList: [],
            uploadHeaders: {

                Authorization: window.localStorage.getItem("token")
            },
            form: {},
            countdata: {},
            user: {},
            fromVisible: false,
        }
    },
    mounted() {
        this.getuser()
    },
    methods: {
        async getcount() {
            const res = await service.get("/shop/count");
            console.log(res)
            this.countdata = res.data
        },
        async getchart() {
            const res = await service.get("/shop/chart");
            console.log(res)
            this.initchart(res.data)
            const res1=await service.get("/shop/chart2");
            this.initchart1(res1.data)
            

        },
        initchart1(data1) {
            let data = data1;
            let x = [];
            let y = [];
            data.forEach(el => {
                x.push(el.name);
                y.push(el.count)
            });
            const myEchart = echarts.init(document.getElementById('chartmain2'));
            const option = {
                title: {
                    text: '各产品销售总额',
                },
             
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                
                    data: x,
                },
                yAxis: {
                    type: 'value',
                },
                series:[
                {

                    type: 'bar',
               
                    data: y,
                },
            ]


            };
            myEchart.setOption(option);

        },
     
        initchart(data1) {
            let data = data1;
            let x = [];
            let y = [];
            data.forEach(el => {
                x.push(el.day);
                y.push(el.price)
            });
            const myEchart = echarts.init(document.getElementById('chartmain1'));
            const option = {
                title: {
                    text: '近一周销售总额',
                },
             
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                
                    data: x,
                },
                yAxis: {
                    type: 'value',
                },
                series:[
                {

                    type: 'line',
                   markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
                    data: y,
                },
            ]


            };
            myEchart.setOption(option);

        },
        qwrz() {
            this.fromVisible = true
            this.form = {}
        },
        async save() {
            if (!this.form.qualificationFile) {
                return this.$message.warning("请上传资料证书")
            }
            if (!this.form.identityFile) {
                return this.$message.warning("请上传身份证")
            }
            if (!this.form.identityNum) {
                return this.$message.warning("请输入身份证")
            }
            const res = await service.post("/examine/add", this.form);
            console.log(res);
            if (res.code == 200) {
                this.fromVisible = false
            }

        },
        handleAvatarSuccess(e) {
            this.form.qualificationFile = e.data
            this.$forceUpdate()
        },
        handleAvatarSuccess1(e) {
            this.form.identityFile = e.data
            this.$forceUpdate()
        },
        async getuser() {
            const res = await service.get("/account/shopinfo");
            console.log(res)
            this.user = res.data
            if (this.user.certified == '已认证') {
                this.getcount()
                this.getchart()
            }
        },
    }
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px !important;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.count {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.countitem {
    width: 24%;
    height: 100px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    padding: 0px 60px 0px 20px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
}

.chartmain {
    width: 100%;
    height: auto;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.chartmain div {
    width: 49%;
    background: #fff;
    border-radius: 10px;
    height: 300px;
}
</style>